<template>
  <div>
    <p v-if='isReadOnlyPage === true'>{{value}}</p>
    <a-radio-group v-else name="radioGroup" @change="onChange" v-model="modelVal">
      <a-radio v-for="(item, ind) in options" :key="item + ind" :value='item.id' :id='code'>{{item.name}}</a-radio>
    </a-radio-group>
  </div>
</template>

<script>
export default {
  props: ['val', 'values', 'isReadOnlyPage', 'code'],
  data () {
    return {
      options: [],
      value: '',
      modelVal: ''
    }
  },
  watch: {
    values: function (ele) {
      this.options = ele
      this.options.forEach((element, ind) => {
        if (element.id === this.val) {
          this.value = element.name
        }
      })
    },
    val: function (ele) {
      this.modelVal = ele
    }
  },
  mounted () {
    this.modelVal = this.val
    this.options = this.values
    this.values.forEach((element, ind) => {
      if (element.id === this.val) {
        this.value = element.name
      }
    })
    this.$emit('changeRadioVal', this.modelVal)
  },
  methods: {
    onChange (e) {
      this.$emit('changeRadioVal', e.target.value)
    }
  }
}
</script>

<style>

</style>
